<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--[if lt IE 9]><!-->
		<script src="http://code.jquery.com/jquery-1.11.3.min.js "></script>
		<!--<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="https://code.jquery.com/jquery-3.2.1.min.js "></script>
		<!--<![endif]-->
		<script>
			/*---------------------------分割线---------------*/
			/*$("div > p")：<div> 元素的直接子元素的所有 <p> 元素；
			 * $("div p")：<div> 元素的后代的所有 <p> 元素
			 * $("div + p")：每个 <div> 元素相邻的下一个 <p> 元素
			 * $("div ~ p")：<div> 元素同级的所有 <p> 元素
			 * 例子详见下面，注释为第六段示例*/
			/*$(document).ready(function() {
				$("button").click(function() {
					var btn = $(this).text();
					$(btn).css("background-color", "yellow");
				});
			});*/
			/*---------------------------分割线---------------*/
			/*
			 * $("p:eq(1)"):<p>标签中的第二个元素
			 * $("p:not(.intro)"):所有不为intro的输入元素
			 * $(":header"):所有标题元素 <h1>, <h2> ...
			 * $("p:contains(is)"):选取所有包含 "is" 的 <p> 元素
			 * $("p:has(span)")：选取所有包含有 <span> 元素在其内的 <p> 元素
			 * 例子详见下面，注释为第七段示例*/
			/*$(document).ready(function() {
				$("p:eq(1)").css("color", "aqua");
				$("p:not(.intro)").css("background-color", "blueviolet");
				$(":header").css("background-color", "darkorange");
				$("p:contains(is)").css("background-color", "yellow");
				$("p:has(span)").css("border","solid red");
			});*/
			/*---------------------------分割线---------------*/
			/*$("ul li:gt(3)")：列举 index 大于 3 的元素（index 值从 0 开始）
			 * $("ul li:lt(3)")：列举 index 小于 3 的元素
			 * 	$(":empty"):所有空元素
			 * $("td:parent"):选取所有带有子元素且包含文本的 <td> 元素
			 * 例子详见下面，注释为第八七段示例*/
			$(document).ready(function() {
				$("button").click(function() {
					var btn = $(this).text();
					$(btn).css("background-color", "yellow");
				});
			});
		</script>
	</head>

	<body>
		<!--//////////////////////////////////////////////////////////////////-->
		<!--第六段示例-->
		<!--<button>div > span</button>
		<button>div span</button>
		<button>div + p</button>
		<button>div ~ p</button><br><br>

		<h4>这个 div 元素有两个直接的子元素 p 和 span:</h4>
		<div style="border:1px solid black;padding:10px;">
			<p>这是一个段落</p>
			<span>这是在 span 元素中的文本</span>
		</div>
		<p>这个 p 元素是 div 的下一个元素</p>
		<p>这是另外一个 p 元素</p>

		<h4>这个 div 元素只有一个直接子元素 p:</h4>
		<div style="border:1px solid black;padding:10px;">
			<p>在是一个段落 <span>这个 span元素在 p 标签里面 </span></p>-->
		<!--//////////////////////////////////////////////////////////////////-->
		<!--第七段示例-->
		<!--<h1>欢迎访问我的主页</h1>
		<h2>菜鸟教程主页</h2>
		<h3>内容很棒!</h3>
		<p class="intro">菜鸟教程</p>
		<p>学的不仅是技术，更是梦想！</p>
		<p>学的不仅是技术，更是梦想！</p>
		<p class="intro">My name is Donald.</p>
		<p>I live in Duckburg.</p>
		<p>My best friend is Mickey.</p>
		<p><span>p 元素中的 span 元素</span></p>
		
		<p>你最喜欢的网站:</p>
		<ul id="choose">
			<li>Google</li>
			<li>Taobao</li>
			<li>Runoob</li>
		</ul>-->
		<!--//////////////////////////////////////////////////////////////////-->
		<!--第八段示例-->
		<button>tr:gt(3)</button>
		<button>tr:lt(4)</button>
		<button>:empty</button>
		<button>td:parent</button><br><br>
		
		<h1>欢迎来到我的主页</h1>

		<table border="1">
			<tr>
				<th>序号</th>
				<th>站点名</th>
				<th>网址</th>
			</tr>
			<tr>
				<td>1</td>
				<td>Google</td>
				<td></td>
			</tr>
			<tr>
				<td>2</td>
				<td>Runoob</td>
				<td>runoob.com</td>
			</tr>
			<tr>
				<td>3</td>
				<td></td>
				<td>taobao.com</td>
			</tr>
			<tr>
				<td>4</td>
				<td>Baidu</td>
				<td>baidu.com</td>
			</tr>
			<tr>
				<td>5</td>
				<td>Sina</td>
				<td>sina.com.cn</td>
			</tr>
			<tr>
				<td>6</td>
				<td>Facebook</td>
				<td>facebook.com</td>
			</tr>
			<tr>
				<td>7</td>
				<td>twitter</td>
				<td>twitter.com</td>
			</tr>
			<tr>
				<td>8</td>
				<td>youtube</td>
				<td>youtube.com</td>
			</tr>

		</table>

	</body>

</html>